<template>
    <div class="newStore">
        <div class="nav">全部知识库</div>
        <el-empty description="暂无知识库" v-if="!stores.length > 0"></el-empty>
        <div v-else class="contain">
            <li v-for="s in stores" :key="s.id" class="store" :id="s.id">
                <img :src="s.face" class="storeFace" />
                <div class="storename">{{ s.storename }}</div>
                <div class="briefly">简介：{{ s.briefly }}</div>
                <el-button type="primary" size="small" round @click="enterStore(s.id)">进入知识库</el-button>
            </li>
        </div>
    </div>
</template>
<script>
import { getallcategory } from '../../api/api'
export default {
    name: 'userinfo',
    data() {
        return {
            stores: []
        }
    },
    created() {
        getallcategory().then(res => {
            this.stores = res.data.data;
        })
    },
    methods:{
        enterStore(id){
            this.$router.push(`/store/${id}`)
        }
    }
}
</script>

<style scoped="scoped">
.nav {
    padding: 10px;
    margin: 5px;
    font-size: 14px;
    font-weight: 600;
    color: rgb(56, 55, 55);
    border-bottom: 1px solid #f0f0f4;
}

.newStore {
    min-height: 300px;
}

.contain {
    display: flex;
    flex-direction:row ;
    flex-wrap: wrap;
    margin: 0px 30px;
}

li:hover {
    background: rgb(226, 240, 253);
}

.store {
    list-style-type: none;
    margin: 5px 10px;
    border-radius: 5px;
    height: 250px;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.storeFace {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    margin-top: 30px;
}

.storename {
    font-size: 13px;
    margin: 10px 10px;
    color: #373535;
    text-align: center;
    height:35px;
}
.el-button{
    margin: 25px 15px;
}
.briefly {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    color: rgb(118, 118, 118);
    margin: 0px 10px;
    word-wrap: break-word;
    word-break: break-all;
    min-height: 35px;
}
</style>